import React, { Component } from 'react';
import { List , Scroller, Touchable } from '$yo-component';
import Header from '$component/header/index.js';
import yoHistory from '$common/history';
import './index.scss';
import Footer from '$component/footer/index.js';
import Skill from '../../../mock/skill.json';

class Detail extends Component {
   
    render() {
        var skillData = []
        skillData = Skill.map(function(item,index){
        return  <div className="yo-card"  key={index}>
                    <div className="extra">
                        <img className="img-cover" src={item.photo} alt="示例图片"/>
                        <div className="img-desc">
                            <h2 className="title">{item.category}</h2>
                            <p className="desc">{item.name}等，使用时间：{item.time}，掌握程度：{item.level}</p>
                        </div>
                    </div>
                </div>
        

      })
        return (
        
            <div className='yo-root' id='root'>
            <div data-reactroot className="yo-flex">
                <Header  className='yo-header' title="技能展示" right={{ title: '点我', onTap: () => alert('hello') }}/>
                <div className='flex'>
                <div className="yo-card">
                    <h3 className="hd">相关技能</h3>
                    <div className="bd">
                        介绍一下我个人的相关技能！
                    </div>
                </div>
                    {skillData}
            </div>
            <Footer className="yo-tab yo-tab-view"/>
            </div>
            </div> 
           
            
        )
        
    }

}

let guid = -1;

function getArrayByLength(length) {
    var ret = [];
    for (var i = 0; i < length; i++) {
        ret[i] = null;
    }
    return ret;
}

function getRandomList(size) {
    return getArrayByLength(size).fill(1).map(num => parseInt(Math.random() * 100));
}

function getRandomDataSource(size) {
    return getRandomList(size).map(num => ({ text: num, key: ++guid }));
}


export default Detail;
